<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>家庭AUM填报原型</title>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css" />
    <style>
      body {
        background-color: #f8f8f8;
        color: #333333;
        padding: 15px;
        display: block;
        height: auto;
        margin: 0;
        overflow: auto;
      }

      /* 画布容器 */
      #canvas-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, 375px);
        gap: 15px;
        padding: 15px;
        justify-content: start;
        width: fit-content;
        min-width: 100%;
      }

      /* 相关页面组容器 */
      .page-group {
        display: contents;
        margin-bottom: 15px;
      }
      .page {
        width: 375px;
        height: 812px;
        margin: 0;
        background: #ffffff;
        color: #333333;
        border: 1px solid #e5e5e5;
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        transition: all 0.3s ease;
        flex-shrink: 0;
        flex-grow: 0;
        position: relative;
        transform: none;
        max-width: 375px;
        max-height: 812px;
        min-width: 375px;
      }

      /* 使用WeUI标准导航栏样式 */
      .weui-navigation-bar {
        position: relative;
        padding-top: 20px;
        background: #ededed;
        text-align: center;
      }
      .weui-navigation-bar__inner {
        position: relative;
        height: 44px;
        display: flex;
        align-items: center;
        padding: 0 12px;
        background: #ededed;
      }
      .weui-navigation-bar__left {
        position: relative;
        padding-left: 16px;
        display: flex;
        align-items: center;
      }
      .weui-navigation-bar__left::before {
        content: '';
        display: inline-block;
        width: 12px;
        height: 12px;
        border-left: 2px solid #000;
        border-bottom: 2px solid #000;
        transform: rotate(45deg);
        margin-right: 8px;
      }
      .weui-navigation-bar__center {
        font-size: 17px;
        text-align: center;
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .weui-navigation-bar__title {
        font-weight: 500;
        font-size: 17px;
        color: rgba(0, 0, 0, 0.9);
      }

      .page__hd {
        display: none;
      }
      .page__title {
        font-size: 20px;
        font-weight: 400;
      }
      .page__desc {
        margin-top: 5px;
        color: #999999;
        font-size: 14px;
      }
      .weui-panel {
        margin: 0 0 20px;
        padding: 0 15px;
      }
      .weui-media-box__title_in-text {
        font-size: 17px;
        margin-bottom: 8px;
      }
      .weui-media-box__desc {
        color: #666666;
        font-size: 13px;
        transition: color 0.3s ease;
      }
      .weui-media-box__info {
        margin-top: 15px;
      }
      .weui-media-box__info__meta {
        color: #999999;
        transition: color 0.3s ease;
      }
      .weui-media-box__info__meta_extra {
        padding-left: 1em;
        border-left: 1px solid #e5e5e5;
      }
      .weui-form-preview {
        margin-bottom: 25px;
      }
      .weui-form__opr-area {
        margin: 30px 15px;
        transition: margin 0.3s ease;
      }

      .weui-cell {
        padding: 16px;
        transition: background-color 0.3s ease;
      }

      .weui-cell:active {
        background-color: #ececec;
      }

      /* 使用WeUI标准输入框样式 */
      .weui-input {
        height: 1.41176471em;
        min-height: 1.41176471em;
        line-height: 1.41176471;
      }

      .weui-cells__group {
        margin-bottom: 24px;
      }

      .weui-cells__title {
        margin-top: 16px;
        margin-bottom: 8px;
        color: #999999;
      }

      .weui-label {
        width: 120px;
        color: #333333;
      }
      .weui-btn {
        margin: 15px auto;
        width: calc(100% - 30px);
        display: block;
      }
      /* 使用WeUI标准搜索栏样式 */
      .weui-search-bar {
        position: relative;
        padding: 8px 15px;
        display: flex;
        box-sizing: border-box;
        background-color: #f7f7f7;
      }
      .weui-search-bar__form {
        position: relative;
        flex: auto;
        background-color: #ffffff;
        border-radius: 4px;
      }
      .weui-search-bar__box {
        position: relative;
        padding-left: 30px;
        padding-right: 30px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        z-index: 1;
      }
      .weui-search-bar__input {
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        width: 100%;
        border: none;
        outline: none;
      }
      .weui-search-bar__label {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
        background: #ffffff;
        border-radius: 4px;
        text-align: center;
        line-height: 28px;
        cursor: pointer;
      }
      .weui-search-bar_focusing .weui-search-bar__label {
        display: none;
      }
      .weui-search-bar__cancel-btn {
        display: none;
        margin-left: 8px;
        line-height: 28px;
        color: #576b95;
        white-space: nowrap;
      }
      .weui-search-bar_focusing .weui-search-bar__cancel-btn {
        display: block;
      }
      .weui-cell_warn {
        color: #fa5151;
      }
      .weui-toast {
        position: fixed;
        z-index: 5000;
        width: 120px;
        height: 120px;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 255, 255, 0.9);
        text-align: center;
        border-radius: 5px;
        color: #333333;
      }
      .weui-toast_text {
        width: auto;
        min-width: 120px;
        max-width: 200px;
        height: auto;
        min-height: 40px;
        padding: 8px 12px;
      }
      .weui-toast__content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
      /* 使用WeUI标准导航栏样式 */
      .weui-navbar {
        display: flex;
        background-color: #ffffff;
        position: relative;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }
      .weui-navbar__item {
        flex: 1;
        text-align: center;
        font-size: 14px;
        line-height: 44px;
        padding: 0;
        color: rgba(0, 0, 0, 0.5);
        position: relative;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }
      .weui-navbar__item.weui-bar__item_on {
        color: #07c160;
        font-weight: 500;
      }
      .weui-navbar__item.weui-bar__item_on:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -1px;
        width: 24px;
        height: 2px;
        background-color: #07c160;
        transform: translateX(-50%);
        border-radius: 1px;
      }

      /* 单选按钮样式 */
      .weui-check {
        position: absolute;
        left: -9999px;
      }
      .weui-check__label {
        display: inline-flex !important;
        align-items: center;
        margin-right: 16px;
      }
      .weui-icon-checked {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 1px solid #d1d1d1;
        border-radius: 50%;
        margin-right: 5px;
        position: relative;
        background-color: #ffffff;
      }
      .weui-check:checked + .weui-icon-checked {
        border-color: #07c160;
        background-color: #07c160;
      }
      .weui-check:checked + .weui-icon-checked:before {
        content: '';
        position: absolute;
        width: 8px;
        height: 4px;
        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(-45deg);
        top: 6px;
        left: 5px;
      }
    </style>
  </head>
  <body data-weui-theme="light">
    <div id="canvas-container">
      <!-- 家庭AUM填报主页 -->
      <div class="page" id="main-page" style="display: block">
        <div class="weui-navigation-bar">
          <div class="weui-navigation-bar__inner">
            <div class="weui-navigation-bar__left">
              <a href="javascript:history.back();" class="weui-navigation-bar__btn"></a>
            </div>
            <div class="weui-navigation-bar__center">
              <span class="weui-navigation-bar__title">家庭AUM填报</span>
            </div>
          </div>
        </div>
        <div class="page__hd">
          <h1 class="page__title">家庭AUM填报</h1>
          <p class="page__desc">请选择需要填报的客户类型</p>
        </div>
        <div class="weui-panel">
          <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_text">
              <h4 class="weui-media-box__title weui-media-box__title_in-text">小贷客户填报</h4>
              <p class="weui-media-box__desc">填报小贷客户的家庭AUM信息</p>
            </div>
            <div class="weui-media-box weui-media-box_text">
              <h4 class="weui-media-box__title weui-media-box__title_in-text">小企业主填报</h4>
              <p class="weui-media-box__desc">填报小企业主的家庭AUM信息</p>
            </div>
            <div class="weui-media-box weui-media-box_text">
              <h4 class="weui-media-box__title weui-media-box__title_in-text">财私客户填报</h4>
              <p class="weui-media-box__desc">填报财私客户的家庭AUM信息</p>
            </div>
            <div class="weui-media-box weui-media-box_text">
              <h4 class="weui-media-box__title weui-media-box__title_in-text">房贷客户填报</h4>
              <p class="weui-media-box__desc">填报房贷客户的家庭AUM信息</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 财私客户相关页面 -->
      <div class="page-group">
      <!-- 财私客户列表页 -->
      <div class="page" id="private-list" style="display: block">
      <div class="weui-navigation-bar">
        <div class="weui-navigation-bar__inner">
          <div class="weui-navigation-bar__left">
            <a href="javascript:history.back()" class="weui-navigation-bar__button"></a>
          </div>
          <div class="weui-navigation-bar__center">
            <span class="weui-navigation-bar__title">财私客户列表</span>
          </div>
        </div>
      </div>
      <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form">
          <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input
              type="search"
              class="weui-search-bar__input"
              placeholder="请输入客户姓名搜索"
              required
            />
            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
          </div>
          <label class="weui-search-bar__label" id="searchText">
            <i class="weui-icon-search"></i>
            <span>请输入客户姓名搜索</span>
          </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
      </div>
      <div class="weui-navbar">
        <div class="weui-navbar__item weui-bar__item_on">待办（1）</div>
        <div class="weui-navbar__item">已办（149）</div>
      </div>
      <div class="weui-panel">
        <div class="weui-panel__bd">
          <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title weui-media-box__title_in-text">郑**</h4>
            <p class="weui-media-box__desc">身份证: 3201************21</p>
            <div class="weui-media-box__info">
              <div class="weui-media-box__info__meta">客户等级: 富嘉</div>
              <div class="weui-media-box__info__meta weui-media-box__info__meta_extra">
                AUM资产: 1000.00万元
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 财私客户信息补充页 -->
    <div class="page" id="private-form" style="display: block">
      <div class="weui-navigation-bar">
        <div class="weui-navigation-bar__inner">
          <div class="weui-navigation-bar__left">
            <a href="javascript:history.back()" class="weui-navigation-bar__button"></a>
          </div>
          <div class="weui-navigation-bar__center">
            <span class="weui-navigation-bar__title">财私客户信息补充</span>
          </div>
        </div>
      </div>
      <div class="weui-form">
        <div class="weui-form__control-area">
          <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells__title">基本信息</div>
            <div class="weui-cells weui-cells_form">
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">客户姓名</label></div>
                <div class="weui-cell__bd"><input class="weui-input" value="郑**" readonly /></div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">身份证后四位</label></div>
                <div class="weui-cell__bd"><input class="weui-input" value="9012" readonly /></div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">客户等级</label></div>
                <div class="weui-cell__bd">
                  <input class="weui-input" value="富嘉" readonly />
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">AUM资产(万元)</label></div>
                <div class="weui-cell__bd">
                  <input class="weui-input" value="1000.00" readonly />
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">是否他行私行客户</label></div>
                <div class="weui-cell__bd" style="display: flex; gap: 16px">
                  <label class="weui-check__label" style="display: flex; align-items: center">
                    <input
                      type="radio"
                      class="weui-check"
                      name="otherPrivateBank"
                      value="是"
                      required
                      checked
                    />
                    <i class="weui-icon-checked"></i>
                    <span>是</span>
                  </label>
                  <label class="weui-check__label" style="display: flex; align-items: center">
                    <input
                      type="radio"
                      class="weui-check"
                      name="otherPrivateBank"
                      value="否"
                      required
                    />
                    <i class="weui-icon-checked"></i>
                    <span>否</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells__title">补充信息</div>
            <div class="weui-cells weui-cells_form">
              <div class="weui-cell weui-cell_access" style="padding-right: 30px; position: relative;">
                <div class="weui-cell__hd"><label class="weui-label">婚姻状况</label></div>
                <div class="weui-cell__bd">
                  <select
                    class="weui-select"
                    id="marital-status"
                    required
                  >
                    <option value="">请选择婚姻状况</option>
                    <option value="已婚">已婚</option>
                    <option value="未婚">未婚</option>
                    <option value="离异">离异</option>
                    <option value="丧偶">丧偶</option>
                  </select>
                </div>
                <div class="weui-cell__ft">
                </div>
              </div>
              <div class="weui-cell" id="spouse-field-group">
                <div class="weui-cell__hd"><label class="weui-label">配偶姓名</label></div>
                <div class="weui-cell__bd">
                  <input
                    class="weui-input"
                    placeholder="请输入配偶姓名（2-20个汉字）"
                    pattern="^[\u4e00-\u9fa5]{2,20}$"
                    required
                  />
                </div>
              </div>
              <div class="weui-cell" id="id-card-field-group">
                <div class="weui-cell__hd"><label class="weui-label">身份证号码</label></div>
                <div class="weui-cell__bd">
                  <input
                    class="weui-input"
                    placeholder="请输入完整18位身份证号码"
                    pattern="^[1-9]\\d{5}(18|19|20)\\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\\d|3[0-1])\\d{3}[\\dXx]$" title="请输入有效的18位身份证号码"
                    pattern="^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dXx]$"
                  />
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">家庭AUM资产(万元)</label></div>
                <div class="weui-cell__bd">
                  <input
                    class="weui-input"
                    type="number"
                    placeholder="请输入行内行外家庭总资产"
                    min="0"
                    max="100000"
                    step="0.01"
                    required
                  />
                </div>

              </div>
            </div>
          </div>
        </div>
        <div class="weui-form__opr-area">
          <button class="weui-btn weui-btn_primary">提交</button>
        </div>
      </div>
    </div>

    <!-- 客户详情页 -->
    <div class="page" id="private-detail" style="display: block">
      <div class="weui-navigation-bar">
        <div class="weui-navigation-bar__inner">
          <div class="weui-navigation-bar__left">
            <a href="javascript:history.back()" class="weui-navigation-bar__button"></a>
          </div>
          <div class="weui-navigation-bar__center">
            <span class="weui-navigation-bar__title">客户详情</span>
          </div>
        </div>
      </div>
      <div class="weui-form-preview">
        <div class="weui-form-preview__hd">
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">客户姓名</label>
            <em class="weui-form-preview__value">郑**</em>
          </div>
        </div>
        <div class="weui-form-preview__bd">
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">身份证后四位</label>
            <span class="weui-form-preview__value">9012</span>
          </div>
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">客户等级</label>
            <span class="weui-form-preview__value">富嘉</span>
          </div>
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">AUM资产(万元)</label>
            <span class="weui-form-preview__value">1000.00</span>
          </div>
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">家庭AUM资产(万元)</label>
            <span class="weui-form-preview__value">1500.00</span>
          </div>
        </div>
        <div class="weui-form-preview__ft">
          <button class="weui-form-preview__btn weui-form-preview__btn_primary">修改</button>
        </div>
      </div>
    </div>

    <!-- 小贷客户相关页面 -->
    <div class="page-group">
      <!-- 小贷客户列表页 -->
      <div class="page" id="loan-list" style="display: block">
      <div class="weui-navigation-bar">
        <div class="weui-navigation-bar__inner">
          <div class="weui-navigation-bar__left">
            <a href="javascript:history.back()" class="weui-navigation-bar__button"></a>
          </div>
          <div class="weui-navigation-bar__center">
            <span class="weui-navigation-bar__title">小贷客户列表</span>
          </div>
        </div>
      </div>
      <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form">
          <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input
              type="search"
              class="weui-search-bar__input"
              placeholder="请输入客户姓名搜索"
              required
            />
            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
          </div>
          <label class="weui-search-bar__label" id="searchText">
            <i class="weui-icon-search"></i>
            <span>请输入客户姓名搜索</span>
          </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
      </div>
      <div class="weui-navbar">
        <div class="weui-navbar__item weui-bar__item_on">待办（1）</div>
        <div class="weui-navbar__item">已办（149）</div>
      </div>
      <div class="weui-panel">
        <div class="weui-panel__bd">
          <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title weui-media-box__title_in-text">李**</h4>
            <p class="weui-media-box__desc">身份证: 3201************01</p>
            <div class="weui-media-box__info">
              <div class="weui-media-box__info__meta">管户机构: 南京玄武支行</div>
              <div class="weui-media-box__info__meta weui-media-box__info__meta_extra">
                贷款余额: 50.00万元
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>

    <!-- 小企业主相关页面 -->
    <div class="page-group">
      <!-- 小企业主列表页 -->
      <div class="page" id="business-list" style="display: block">
      <div class="weui-navigation-bar">
        <div class="weui-navigation-bar__inner">
          <div class="weui-navigation-bar__left">
            <a href="javascript:history.back()" class="weui-navigation-bar__button"></a>
          </div>
          <div class="weui-navigation-bar__center">
            <span class="weui-navigation-bar__title">小企业主列表</span>
          </div>
        </div>
      </div>
      <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form">
          <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input
              type="search"
              class="weui-search-bar__input"
              placeholder="请输入客户姓名搜索"
              required
            />
            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
          </div>
          <label class="weui-search-bar__label" id="searchText">
            <i class="weui-icon-search"></i>
            <span>请输入客户姓名搜索</span>
          </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
      </div>
      <div class="weui-navbar">
        <div class="weui-navbar__item weui-bar__item_on">待办（1）</div>
        <div class="weui-navbar__item">已办（149）</div>
      </div>
      <div class="weui-panel">
        <div class="weui-panel__bd">
          <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title weui-media-box__title_in-text">王**</h4>
            <p class="weui-media-box__desc">身份证: 3201************02</p>
            <div class="weui-media-box__info">
              <div class="weui-media-box__info__meta">管户机构: 南京秦淮支行</div>
              <div class="weui-media-box__info__meta weui-media-box__info__meta_extra">
                贷款余额: 200.00万元
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 小贷客户信息补充页 -->
    <div class="page" id="loan-form" style="display: block">
      <div class="weui-navigation-bar">
        <div class="weui-navigation-bar__inner">
          <div class="weui-navigation-bar__left">
            <a href="javascript:history.back()" class="weui-navigation-bar__button"></a>
          </div>
          <div class="weui-navigation-bar__center">
            <span class="weui-navigation-bar__title">小贷客户信息补充</span>
          </div>
        </div>
      </div>
      <div class="page__hd">
        <h1 class="page__title">小贷客户信息补充</h1>
        <p class="page__desc">请填写客户相关信息</p>
      </div>
      <div class="weui-form">
        <div class="weui-form__control-area">
          <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells__title">基本信息</div>
            <div class="weui-cells weui-cells_form">
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">客户姓名</label></div>
                <div class="weui-cell__bd"><input class="weui-input" value="李**" readonly /></div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">身份证后四位</label></div>
                <div class="weui-cell__bd"><input class="weui-input" value="5678" readonly /></div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">贷款种类</label></div>
                <div class="weui-cell__bd">
                  <input class="weui-input" value="邮农e贷" readonly />
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">贷款余额(万元)</label></div>
                <div class="weui-cell__bd">
                  <input class="weui-input" value="50.00" readonly />
                  <div class="weui-cell__ft">
                    <i class="weui-icon-warn" style="display: none"></i>
                    <div class="weui-cell__tips">校验范围：0 &lt; 金额 &lt; 10000</div>
                  </div>
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">是否他行私行客户</label></div>
                <div class="weui-cell__bd" style="display: flex; gap: 16px">
                  <label class="weui-check__label" style="display: flex; align-items: center">
                    <input
                      type="radio"
                      class="weui-check"
                      name="otherPrivateBank"
                      value="是"
                      required
                    />
                    <i class="weui-icon-checked"></i>
                    <span>是</span>
                  </label>
                  <label class="weui-check__label" style="display: flex; align-items: center">
                    <input
                      type="radio"
                      class="weui-check"
                      name="otherPrivateBank"
                      value="否"
                      required
                    />
                    <i class="weui-icon-checked"></i>
                    <span>否</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells__title">补充信息</div>
            <div class="weui-cells weui-cells_form">
              <div class="weui-cell weui-cell_access">
                <div class="weui-cell__hd"><label class="weui-label">婚姻状况</label></div>
                <div class="weui-cell__bd">
                  <select
                  class="weui-select"
                    id="marital-status"
                    style="display:none;"
                    required
                  >
                    <option value="">请选择婚姻状况</option>
                    <option value="已婚">已婚</option>
                    <option value="未婚">未婚</option>
                    <option value="离异">离异</option>
                    <option value="丧偶">丧偶</option>
                  </select>
                  </div>
                </div>
              </div>
              <div class="weui-cell" id="spouse-field-group">
                <div class="weui-cell__hd"><label class="weui-label">配偶姓名</label></div>
                <div class="weui-cell__bd">
                  <input
                    class="weui-input"
                    placeholder="请输入配偶姓名（2-20个汉字）"
                    pattern="^[\u4e00-\u9fa5]{2,20}$"
                    required
                  />
                </div>
              </div>
              <div class="weui-cell" id="id-card-field-group">
                <div class="weui-cell__hd"><label class="weui-label">身份证号码</label></div>
                <div class="weui-cell__bd">
                  <input
                    class="weui-input"
                    placeholder="请输入完整18位身份证号码"
                    pattern="^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dXx]$"
                    required
                  />
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">家庭AUM资产(万元)</label></div>
                <div class="weui-cell__bd">
                  <input
                    class="weui-input"
                    type="number"
                    placeholder="请输入行内行外家庭总资产"
                    min="0"
                    max="100000"
                    step="0.01"
                    required
                  />
                </div>

              </div>
            </div>
          </div>
        </div>
        <div class="weui-form__opr-area">
          <button class="weui-btn weui-btn_primary">提交</button>
        </div>
      </div>
    </div>

    <!-- 小企业主信息补充页 -->
    <div class="page" id="business-form" style="display: block">
      <div class="weui-navigation-bar">
        <div class="weui-navigation-bar__inner">
          <div class="weui-navigation-bar__left">
            <a href="javascript:history.back()" class="weui-navigation-bar__button"></a>
          </div>
          <div class="weui-navigation-bar__center">
            <span class="weui-navigation-bar__title">小企业主信息补充</span>
          </div>
        </div>
      </div>
      <div class="page__hd">
        <h1 class="page__title">小企业主信息补充</h1>
        <p class="page__desc">请填写客户相关信息</p>
      </div>
      <div class="weui-form">
        <div class="weui-form__control-area">
          <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells__title">基本信息</div>
            <div class="weui-cells weui-cells_form">
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">客户姓名</label></div>
                <div class="weui-cell__bd"><input class="weui-input" value="王**" readonly /></div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">身份证后四位</label></div>
                <div class="weui-cell__bd"><input class="weui-input" value="3456" readonly /></div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">持有贷款种类</label></div>
                <div class="weui-cell__bd">
                  <input class="weui-input" value="邮农e贷" readonly />
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">贷款余额(万元)</label></div>
                <div class="weui-cell__bd">
                  <input class="weui-input" value="200.00" readonly />
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">我行AUM资产(万元)</label></div>
                <div class="weui-cell__bd">
                  <input class="weui-input" value="300.00" readonly />
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">是否他行私行客户</label></div>
                <div class="weui-cell__bd" style="display: flex; gap: 16px">
                  <label class="weui-check__label" style="display: flex; align-items: center">
                    <input
                      type="radio"
                      class="weui-check"
                      name="otherPrivateBank"
                      value="是"
                      required
                    />
                    <i class="weui-icon-checked"></i>
                    <span>是</span>
                  </label>
                  <label class="weui-check__label" style="display: flex; align-items: center">
                    <input
                      type="radio"
                      class="weui-check"
                      name="otherPrivateBank"
                      value="否"
                      required
                    />
                    <i class="weui-icon-checked"></i>
                    <span>否</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells__title">补充信息</div>
            <div class="weui-cells weui-cells_form">
              <div class="weui-cell weui-cell_access">
                <div class="weui-cell__hd"><label class="weui-label">婚姻状况</label></div>
                <div class="weui-cell__bd">
                  <select
                  class="weui-select"
                    id="marital-status"
                    style="display:none;"
                    required
                  >
                    <option value="">请选择婚姻状况</option>
                    <option value="已婚">已婚</option>
                    <option value="未婚">未婚</option>
                    <option value="离异">离异</option>
                    <option value="丧偶">丧偶</option>
                  </select>
                  </div>
                </div>
              </div>
              <div class="weui-cell" id="spouse-field-group">
                <div class="weui-cell__hd"><label class="weui-label">配偶姓名</label></div>
                <div class="weui-cell__bd">
                  <input
                    class="weui-input"
                    placeholder="请输入配偶姓名"
                    pattern="^[\u4e00-\u9fa5]{2,20}$"
                    required
                  />
                </div>
              </div>
              <div class="weui-cell" id="id-card-field-group">
                <div class="weui-cell__hd"><label class="weui-label">身份证号码</label></div>
                <div class="weui-cell__bd">
                  <input
                    class="weui-input"
                    placeholder="请输入完整18位身份证号码"
                    pattern="^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dXx]$"
                    required
                  />
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">家庭AUM资产(万元)</label></div>
                <div class="weui-cell__bd">
                  <input
                    class="weui-input"
                    type="number"
                    placeholder="请输入行内行外家庭总资产"
                    min="0"
                    max="100000"
                    step="0.01"
                    required
                  />
                </div>

              </div>
            </div>
          </div>
        </div>
        <div class="weui-form__opr-area">
          <button class="weui-btn weui-btn_primary">提交</button>
        </div>
      </div>
    </div>
    </div>

    <!-- 房贷客户相关页面 -->
    <div class="page-group">
      <!-- 房贷客户列表页 -->
      <div class="page" id="mortgage-list" style="display: block">
      <div class="weui-navigation-bar">
        <div class="weui-navigation-bar__inner">
          <div class="weui-navigation-bar__left">
            <a href="javascript:history.back()" class="weui-navigation-bar__button"></a>
          </div>
          <div class="weui-navigation-bar__center">
            <span class="weui-navigation-bar__title">房贷客户列表</span>
          </div>
        </div>
      </div>
      <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form">
          <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input
              type="search"
              class="weui-search-bar__input"
              placeholder="请输入客户姓名搜索"
              required
            />
            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
          </div>
          <label class="weui-search-bar__label" id="searchText">
            <i class="weui-icon-search"></i>
            <span>请输入客户姓名搜索</span>
          </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
      </div>
      <div class="weui-navbar">
        <div class="weui-navbar__item weui-bar__item_on">待办（1）</div>
        <div class="weui-navbar__item">已办（149）</div>
      </div>
      <div class="weui-panel">
        <div class="weui-panel__bd">
          <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title weui-media-box__title_in-text">张**</h4>
            <p class="weui-media-box__desc">身份证: 3201************03</p>
            <div class="weui-media-box__info">
              <div class="weui-media-box__info__meta">管户机构: 南京建邺支行</div>
              <div class="weui-media-box__info__meta weui-media-box__info__meta_extra">
                贷款余额: 300.00万元
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 房贷客户信息补充页 -->
    <div class="page" id="mortgage-form" style="display: block">
      <div class="weui-navigation-bar">
        <div class="weui-navigation-bar__inner">
          <div class="weui-navigation-bar__left">
            <a href="javascript:history.back()" class="weui-navigation-bar__button"></a>
          </div>
          <div class="weui-navigation-bar__center">
            <span class="weui-navigation-bar__title">房贷客户信息补充</span>
          </div>
        </div>
      </div>
      <div class="page__hd">
        <h1 class="page__title">房贷客户信息补充</h1>
        <p class="page__desc">请填写客户相关信息</p>
      </div>
      <div class="weui-form">
        <div class="weui-form__control-area">
          <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells__title">基本信息</div>
            <div class="weui-cells weui-cells_form">
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">客户姓名</label></div>
                <div class="weui-cell__bd"><input class="weui-input" value="张**" readonly /></div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">身份证后四位</label></div>
                <div class="weui-cell__bd"><input class="weui-input" value="9876" readonly /></div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">持有贷款种类</label></div>
                <div class="weui-cell__bd">
                  <input class="weui-input" value="个人住房贷款" readonly />
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">贷款余额(万元)</label></div>
                <div class="weui-cell__bd">
                  <input class="weui-input" value="300.00" readonly />
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">我行AUM资产(万元)</label></div>
                <div class="weui-cell__bd">
                  <input class="weui-input" value="400.00" readonly />
                </div>
              </div>
            </div>
          </div>
          <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells__title">补充信息</div>
            <div class="weui-cells weui-cells_form">
              <div class="weui-cell weui-cell_access">
                <div class="weui-cell__hd"><label class="weui-label">婚姻状况</label></div>
                <div class="weui-cell__bd">
                  <select
                  class="weui-select"
                    id="marital-status"
                    style="display:none;"
                    required
                  >
                    <option value="">请选择婚姻状况</option>
                    <option value="已婚">已婚</option>
                    <option value="未婚">未婚</option>
                    <option value="离异">离异</option>
                    <option value="丧偶">丧偶</option>
                  </select>
                  </div>
                </div>
              </div>
              <div class="weui-cell" id="spouse-field-group">
                <div class="weui-cell__hd"><label class="weui-label">配偶姓名</label></div>
                <div class="weui-cell__bd">
                  <input
                    class="weui-input"
                    placeholder="请输入配偶姓名（2-20个汉字）"
                    pattern="^[\u4e00-\u9fa5]{2,20}$"
                    required
                  />
                </div>
              </div>
              <div class="weui-cell" id="id-card-field-group">
                <div class="weui-cell__hd"><label class="weui-label">身份证号码</label></div>
                <div class="weui-cell__bd">
                  <input
                    class="weui-input"
                    placeholder="请输入完整18位身份证号码"
                    pattern="^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dXx]$"
                    required
                  />
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">家庭AUM资产(万元)</label></div>
                <div class="weui-cell__bd">
                  <input
                    class="weui-input"
                    type="number"
                    placeholder="请输入行内行外家庭总资产"
                    min="0"
                    max="100000"
                    step="0.01"
                    required
                  />
                </div>

              </div>
            </div>
          </div>
        </div>
        <div class="weui-form__opr-area">
          <button class="weui-btn weui-btn_primary">提交</button>
        </div>
      </div>
    </div>
      </div>
    </div>

    <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script>
      // 标签页切换逻辑
      document.querySelectorAll('.weui-navbar__item').forEach((tab, index) => {
        tab.addEventListener('click', function () {
          // 移除所有标签页的激活状态
          document.querySelectorAll('.weui-navbar__item').forEach((t) => {
            t.classList.remove('weui-bar__item_on')
          })
          // 添加当前标签页的激活状态
          this.classList.add('weui-bar__item_on')

          // 获取当前页面中的内容区域
          const contentAreas = this.closest('.page').querySelectorAll('.weui-tab__panel')
          if (contentAreas && contentAreas.length > 0) {
            // 隐藏所有内容区域
            contentAreas.forEach((area) => {
              area.style.display = 'none'
            })
            // 显示当前标签对应的内容区域
            if (contentAreas[index]) {
              contentAreas[index].style.display = 'block'
            }
          }
        })
      })

      // 搜索框交互效果
      const searchBar = document.getElementById('searchBar')
      const searchInput = searchBar ? searchBar.querySelector('.weui-search-bar__input') : null
      const searchText = document.getElementById('searchText')
      const searchClear = document.getElementById('searchClear')
      const searchCancel = document.getElementById('searchCancel')

      if (searchBar && searchInput && searchText && searchClear && searchCancel) {
        // 点击搜索框标签时，显示输入框
        searchText.addEventListener('click', function () {
          searchBar.classList.add('weui-search-bar_focusing')
          searchInput.focus()
        })

        // 点击取消按钮时，隐藏输入框并清空内容
        searchCancel.addEventListener('click', function () {
          searchBar.classList.remove('weui-search-bar_focusing')
          searchInput.value = ''
        })

        // 点击清除按钮时，清空输入框内容
        searchClear.addEventListener('click', function () {
          searchInput.value = ''
          searchInput.focus()
        })
      }

      // 为客户列表项添加点击反馈效果
      document.querySelectorAll('.weui-media-box').forEach((item) => {
        item.addEventListener('touchstart', function () {
          this.style.backgroundColor = '#f2f2f2'
        })
        item.addEventListener('touchend', function () {
          this.style.backgroundColor = ''
        })
      })

      // 婚姻状况字段处理函数
      function toggleSpouseAndIDFields() {
        const maritalStatus = document.getElementById('marital-status')
        const spouseFieldGroup = document.getElementById('spouse-field-group')
        const idCardFieldGroup = document.getElementById('id-card-field-group')
        
        if (maritalStatus && spouseFieldGroup && idCardFieldGroup) {
          const value = maritalStatus.value
          
          if (value === '已婚') {
            spouseFieldGroup.style.display = 'flex'
            idCardFieldGroup.style.display = 'flex'
            spouseFieldGroup.querySelector('input').required = true
            idCardFieldGroup.querySelector('input').required = true
          } else {
            spouseFieldGroup.style.display = 'none'
            idCardFieldGroup.style.display = 'none'
            spouseFieldGroup.querySelector('input').required = false
            idCardFieldGroup.querySelector('input').required = false
          }
        }
      }

      // 初始化婚姻状况Picker
      function initMaritalStatusPickers() {
        // 婚姻状况选项
        const maritalOptions = [
          { label: '已婚', value: '已婚' },
          { label: '未婚', value: '未婚' },
          { label: '离异', value: '离异' },
          { label: '丧偶', value: '丧偶' }
        ]

        // 获取所有婚姻状况字段
        document.querySelectorAll('.weui-cell:has(#marital-status)').forEach((cell) => {
          const select = cell.querySelector('#marital-status')
          const input = document.createElement('input')
          input.className = 'weui-input'
          input.placeholder = '请选择'
          input.readOnly = true
          input.id = 'marital-status-picker'
          input.dataset.values = JSON.stringify(maritalOptions.map(option => option.value))
          input.dataset.titles = JSON.stringify(maritalOptions.map(option => option.label))
          
          // 替换select为input
          select.parentNode.replaceChild(input, select)
          
          // 为input添加点击事件
          input.addEventListener('click', function() {
            // 获取当前页面作为picker的容器
            const currentPage = this.closest('.page');
            
            weui.picker(maritalOptions, {
              onChange: function(result) {
                console.log(result)
              },
              onConfirm: function(result) {
                input.value = result.label
                input.dataset.value = result.value
                
                // 触发配偶字段显示/隐藏逻辑
                if (result.value === '已婚') {
                  const spouseFieldGroup = document.getElementById('spouse-field-group')
                  const idCardFieldGroup = document.getElementById('id-card-field-group')
                  
                  if (spouseFieldGroup && idCardFieldGroup) {
                    spouseFieldGroup.style.display = 'flex'
                    idCardFieldGroup.style.display = 'flex'
                    spouseFieldGroup.querySelector('input').required = true
                    idCardFieldGroup.querySelector('input').required = true
                  }
                } else {
                  const spouseFieldGroup = document.getElementById('spouse-field-group')
                  const idCardFieldGroup = document.getElementById('id-card-field-group')
                  
                  if (spouseFieldGroup && idCardFieldGroup) {
                    spouseFieldGroup.style.display = 'none'
                    idCardFieldGroup.style.display = 'none'
                    spouseFieldGroup.querySelector('input').required = false
                    idCardFieldGroup.querySelector('input').required = false
                  }
                }
              },
              title: '请选择婚姻状况',
              container: currentPage // 限制picker在当前页面范围内弹出
            })
          })
        })
      }

      // 表单验证功能
      const form = document.querySelector('.weui-form')
      const submitBtn = form ? form.querySelector('.weui-btn_primary') : null

      if (submitBtn) {
        submitBtn.addEventListener('click', function (e) {
          // 获取所有必填输入框
          const requiredInputs = form.querySelectorAll('input[required]')
          let isValid = true

          // 验证每个必填输入框
          requiredInputs.forEach((input) => {
            if (!input.value.trim()) {
              isValid = false
              // 添加错误提示
              const cell = input.closest('.weui-cell')
              cell.classList.add('weui-cell_warn')

              // 移除之前的错误提示（如果有）
              const existingError = cell.querySelector('.weui-cell__ft')
              if (existingError) {
                existingError.remove()
              }

              // 添加新的错误提示
              const error = document.createElement('div')
              error.className = 'weui-cell__ft'
              error.innerHTML = '<i class="weui-icon-warn"></i>'
              cell.appendChild(error)
            }
          })

          // 如果验证不通过，阻止表单提交
          if (!isValid) {
            e.preventDefault()
            // 显示错误提示
            const toast = document.createElement('div')
            toast.className = 'weui-toast weui-toast_text'
            toast.innerHTML = `
              <div class="weui-toast__content">请填写必填项</div>
            `
            document.body.appendChild(toast)

            // 3秒后移除错误提示
            setTimeout(() => {
              document.body.removeChild(toast)
            }, 3000)
          }
        })

        // 输入框获得焦点时移除错误提示
        form.querySelectorAll('input').forEach((input) => {
          input.addEventListener('focus', function () {
            const cell = this.closest('.weui-cell')
            cell.classList.remove('weui-cell_warn')
            const error = cell.querySelector('.weui-cell__ft')
            if (error) {
              error.remove()
            }
          })
        })
      }

      // 优化页面滚动效果
      document.querySelectorAll('.page').forEach((page) => {
        page.style.overflowY = 'auto'
        page.style.scrollBehavior = 'smooth'
      })

      // 页面加载完成后初始化所有picker
      document.addEventListener('DOMContentLoaded', function() {
        initMaritalStatusPickers()
      })
    </script>
  </body>
</html>
